<template>
	<view class="car-number-box">
		<view :class="{'input': true, 'on': isFocus, 'error': isError}">
			<input type="text" :value="carnum" :disabled="true" placeholder="请完善车牌号码" placeholder-style="font-size: 28rpx" @click="showKeyboard">
		</view>

		<view class="jianpan" :class="{'show': keyboard > 0}">
			<view class="top">
				<view></view>
				<view class="shouqi" @click="hideKeyboard()"> 
					<IconFont name="icon-xialaxuanzekuang" />
				</view>
			</view>
			<view class="content zh-content" v-if="keyboard === 1">
				<view class="line" v-for="(v,k) in car_no_p" :key="k">
					<view class="item" v-for="(item, kk) in v" :key="kk">
						<view class="item-text" v-if="item !== 'A' && item !== '删'" @click="clickItemProvince(item)">{{item}}</view>
						<view class="item-text action" v-if="item === 'A'" @click="changeKeyboard(2)">ABC</view>
						<view class="item-text action" v-if="item === '删'" @click="delCarNum()">
							<IconFont name="icon-tuige" />
						</view>
					</view>
				</view>
			</view>
			<view class="content zh-content" v-if="keyboard === 2">
				<view class="line">
					<view class="item" v-for="(v,k) in car_no_n" :key="k">
						<view class="item-text" @click="clickItemLetter(v)">{{v}}</view>
					</view>
				</view>
				<view class="line" v-for="(v,k) in car_no_l" :key="k">
					<view class="item" v-for="(item, kk) in v" :key="kk">
						<view class="item-text" v-if="item !== '省' && item !== '删'" @click="clickItemLetter(item)">{{item}}</view>
						<view class="item-text action" v-if="item === '省'" @click="changeKeyboard(1)">省份</view>
						<view class="item-text action" v-if="item === '删'" @click="delCarNum()">
							<IconFont name="icon-tuige" />
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import IconFont from './icon-font.vue'
	export default {
		name: "car-number",
		components: {
			IconFont
		},
		props: {
			value: {
				type: String,
				default: ''
			},
		},
		data() {
			return {
				isFocus: false,
				isError: false,

				carnum: '',

				car_no_p: [],
				car_no_n: [],
				car_no_l: [],
				keyboard: 0
			};
		},
		
		watch:{
			value(e){
				this.carnum = e
				this.checkCarNum(e)
			}
		},

		methods: {
			onFocus() {
				this.isFocus = true
			},

			onBlur() {
				this.isFocus = false
			},

			onChange(e) {
				console.log(e.target.value)
				this.$emit("input", e.target.value);
				this.$emit("change", e.target.value);
			},

			formatCarDatas() {
				const p = '京津渝沪冀晋辽吉黑苏|浙皖闽赣鲁豫鄂湘粤琼|川贵云陕甘青蒙桂宁新|A藏使领警学港澳删'
				const p_arr = p.split('|')
				const p_arr_2 = []
				p_arr.map((v, k) => {
					p_arr_2[k] = v.split('')
				})
				this.car_no_p = p_arr_2

				const n = '1234567890'
				this.car_no_n = n.split('')

				const l = 'QWERTYUIOP|ASDFGHJKL|省ZXCVBNM删'
				const l_arr = l.split('|')
				const l_arr_2 = []
				l_arr.map((v, k) => {
					l_arr_2[k] = v.split('')
				})
				this.car_no_l = l_arr_2
			},

			clickItemProvince(item) {
				this.carnum = item
				this.keyboard = 2
				this.checkCarNum(this.carnum)
			},

			clickItemLetter(item) {
				if (this.carnum.length > 10) {
					return
			 }
				this.carnum += item
				this.checkCarNum(this.carnum)
			},

			changeKeyboard(key) {
				this.keyboard = key
			},

			showKeyboard() {
				this.keyboard = 1
				this.isFocus = true
			},

			hideKeyboard() {
				this.keyboard = 0
				this.isFocus = false
			},

			delCarNum() {
			 const c = this.carnum
				const c_arr = c.split('')
				c_arr.splice(c_arr.length - 1, 1)
				this.carnum = c_arr.join('')

				this.checkCarNum(this.carnum)
			},

			checkCarNum(num) {
				const reg = /^(([京津渝沪冀晋辽吉黑苏浙皖闽赣鲁豫鄂湘粤琼川贵云陕甘青蒙桂宁新藏使领警学港澳][A-Z](([0-9]{5}[DF])|([DF]([A-HJ-NP-Z0-9])[0-9]{4})))|([京津渝沪冀晋辽吉黑苏浙皖闽赣鲁豫鄂湘粤琼川贵云陕甘青蒙桂宁新藏使领警学港澳][A-Z][A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳使领]))$/i;
				num = num.replace(/\ +/g, '');
				this.carnum = num;
				this.isError = !reg.test(num);
				
				this.$emit('error', this.isError)
				this.$emit("input", this.carnum);
			},

			setCarNum(e) {
				this.carnum = e;
				this.checkCarNum(e);
			}
		},

		mounted() {
			this.formatCarDatas()
		}
	}
</script>

<style lang="less" scoped>
	.input {
		width: 100%;
		height: 70rpx;
		box-sizing: border-box;
		position: relative;
		width: 100%;
		padding: 8rpx 0;
		background-color: #fff;
		background-image: none;
		// border: 1px solid #d9d9d9;
		border-radius: 8rpx;
		transition: all .3s;
		display: flex;
	
		input {
			flex: 1;
			height: 100%;
			font-size: 28rpx;
		}
	
		&.on {
			// border-color: #1890ff;
			// box-shadow: 0 0 3px #e6f7ff;
		}
		
		&.error {
			// border-color: #ff4d4f;
			// box-shadow: 0 0 3px #ff7875;
		}
		&.must{
			position: relative;
			&:after{
				content: '*';
				color: #ff4d4f;
				font-size: 30rpx;
				position: absolute;
				top: 0;
				right: -8px;
			}
		}
	}
	.jianpan {
		position: fixed;
		bottom: -9999rpx;
		left: 0;
		width: 100%;
		background: #eee;
		z-index: 3001;
		overflow: hidden;
		transition: all .3s ease;

		&.show {
			bottom: 0;
		}

		.top {
			height: 70rpx;
			background: #fff;
			// border-top: 1px solid #eee;
			// box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
			display: flex;
			justify-content: space-between;

			.shouqi {
				width: 100rpx;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;

				&:active {
					background: #ccc;
					color: #fff;
				}
			}
		}

		.content {
			padding: 20rpx 10rpx;

			.line {
				display: flex;
				justify-content: space-around;
				padding-bottom: 15rpx;

				.item {
					min-width: 60rpx;
					border-radius: 3px;
					box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
					text-align: center;
					height: 70rpx;
					overflow: hidden;

					.item-text {
						width: 100%;
						font-size: 26rpx;
						line-height: 70rpx;
						background: #fff;

						&.action {
							background: rgb(192, 192, 192);
							width: 90rpx;
						}

						&:active {
							background: #ccc;
							color: #fff;
						}
					}
				}
			}

			&.zh-content {}
		}
	}
</style>
